<template>
	<view>
		<!-- <page-head ref="pageHead" :title="'森歌微商城-客户指派'" :headtype="2"></page-head> -->
		
		<tabs :current="active" @change="navclick1" :is-scroll="true" style="text-align: center;position: fixed;top: 0;z-index: 999;width: 100%;">
			<tab name="未联系"></tab>
			<tab name="已联系"></tab>
		</tabs>
		<mescroll-body ref="mescrollRef" :up="{
			  	noMoreSize: 10,
			  	empty: {
			  		icon: '/static/image/order_null.png',
			  		tip: '暂无数据~',
			  		fixed: false
			  	}
			  }" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view class="oList margin30" :style="'margin-top:'+pageTop+'px'">
					<!-- 0-新指派；1-已联系 -->
					<view class="item" v-for="item in dataList">
						<view class="oTop clearfix">
							<view class="fl">
								<image class="itemImg" :src="item.user_info.avatar"/>
							</view>
							<view class="ml fl">
								<view class="oUserName">{{item.user_info.nickname}}</view>
								<!-- <view class="oTime">2023-02-07   已绑定</view> -->
							</view>
							<view v-if="item.assign_btn == 1 " class="oUserTag fr" @click="contact(item.id)">设为已联系</view>
							<!-- <view v-else class="oUserTag fr yioUserTag">已联系</view> -->
						</view>
						<view class="oBottom">
							<view class="obItem">支付定金：￥{{item.order_amount}}</view>
							<view class="obItem">产品型号：</view>
							<!-- <view class="hint">{{item.template}}</view> -->
							<!-- <view v-for="(items,indexs) in item.order_goods"> -->
								<view class="shop flex-start" v-for="(items,indexs) in item.order_goods">
									<image :src="items.image" mode=""></image>
									<view class="senge">{{items.goods_name}}</view>
								</view>
							<!-- </view> -->
							<view class="obItem" v-if="item.user_order!=''">预约客户：{{item.user_order.real_name}}</view>
							<view class="obItem" v-if="item.user_order!=''">到店时间：{{item.user_order.order_time_text}}</view>
							<view class="obItem">客户电话：{{item.user_info.mobile}}</view>
							<view class="obItem">安装地址：{{item.province}}{{item.city}}{{item.district}}{{item.address}}</view>
							<view class="obItem">原下单门店：{{item.shop.name}}</view>
							<!-- <view class="obItem">指派原因：跨区域销售，请及时与用户取得联系</view> -->
						</view>
					</view>
				</view>
			</mescroll-body>
		
		<!-- <view class="oList margin30" :style="'margin-top:'+pageTop+'px'">
			<view class="item" v-for="item in dataLists">
				<view class="oTop clearfix">
					<view class="fl">
						<image class="itemImg" src="/static/image/integralIcon4.png"/>
					</view>
					<view class="ml fl">
						<view class="oUserName">森小哥</view>
						<view class="oTime">2023-02-07   已绑定</view>
					</view>
					<view class="oUserTag fr">已联系</view>
				</view>
				<view class="oBottom">
					<view class="obItem">支付定金：￥23562.00</view>
					<view class="obItem">产品型号：TX-hdg0</view>
					<view class="obItem">客户信息：张女士，<text style="color: #216BBF;">18888888</text></view>
					<view class="obItem">安装地址：浙江嵊州经销商</view>
					<view class="obItem">原下单门店：浙江绍兴越城区xx小区</view>
					<view class="obItem">指派原因：跨区域销售，请及时与用户取得联系</view>
				</view>
			</view>
			<view class="lookMore">~已经到底了~</view>
		</view> -->
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item";
	import {zplists} from '@/api/user'
	import {UpAssignStatus} from '@/api/user'
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		data() {
			return {
				active:0,
				pageTop:38,
				topHeight:0,
				dataLists:[1,1,1],
				dataList:[],
				activenav1: 0,
			}
		},
		onLoad() {
			// this.$refs.pageHead.getTopHeight()
		},
		methods: {
			async contact(option) {
				const {
					data,
					code,
					msg
				} = await UpAssignStatus({
					id: option,
				});
				if (code == 1) {
					this.downCallback() 
					this.$toast({
						title: msg
					});
				} 
			},
			// contact(option){
			// 	console.log('0',option)
			// 	const {
			// 	    code,
			// 	    data,
			// 	    msg
			// 	} = UpAssignStatus({
			// 	    id: option,
			// 	})
			// 	if (code == 1) {
			// 	console.log(333)
			// 	}
			// 	// UpAssignStatus({
			// 	// 	id: option.id,
			// 	// }).then(({
			// 	// 	data
			// 	// }) => {
			// 	// 	let curPageData = data.list;
			// 	// })
			// },
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				let {
					orderType,
				} = this;
				zplists({
					page_size: pageSize,
					page_no: pageNum,
					type: this.activenav1
				}).then(({
					data
				}) => {
					let curPageData = data.list;
					let curPageLen = curPageData.length;
					let hasNext = !!data.more;
					if (page.num == 1) this.dataList = [];
					this.dataList = this.dataList.concat(curPageData);
					console.log(this.dataList)
					this.mescroll.endSuccess(curPageLen, hasNext);
				})
			},
			navclick1(type) { //切换状态
				let that = this;
				that.activenav1 = type;
				// if(type ==0){
					that.downCallback() 
				// }
				// if(type ==1){
				// 	that.downCallback() 
				// }
			},
		}
	}
</script>

<style>
	page{
		background-color: #f4f4f4;
	}
	.tabsBox{
		width: 100%;
		background-color: #efefef;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;
	}
	.oList{
		padding: 28rpx 0 12rpx;
	}
	.oList .item{
		margin-bottom: 20rpx;
		background-color: #fff;
		box-shadow: 0px 0px 6rpx 0px rgba(140,140,140,0.43);
		border-radius: 10rpx;
		padding: 38rpx 24rpx 10rpx;
	}
	.itemImg{
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
	}
	.ml{
		margin-left: 20rpx;
		padding-top: 20rpx;
	}
	.oUserName{
		font-size: 30rpx;
		color: #999999;
	}
	.oTime{
		font-size: 22rpx;
		margin-top: 10rpx;
		color: #999999;
	}
	.oUserTag{
		width: 140rpx;
		height: 58rpx;
		text-align: center;
		line-height: 58rpx;
		/* background: #eaf1f8; */
		border: 1px solid #ee434b;
		border-radius: 50rpx;
		font-size: 24rpx;
		color: #ee434b;
		margin-top: 24rpx;
	}
	.yioUserTag{
		border: 1px solid #999999;
		color: #999999;
	}
	.oTop{
		padding-bottom: 10rpx;
		border-bottom: solid 1rpx rgba(0,0,0,0.05);
	}
	.oBottom{
		padding: 20rpx;
	}
	.obItem{
		font-size: 28rpx;
		color: #999999;
		line-height: 65rpx;
	}
	.lookMore{
		padding: 10rpx 0 30rpx;
		text-align: center;
		font-size: 23rpx;
		color: #898A8B;
	}
	.shop {
		margin-bottom: 8rpx;
	}
	
	.shop image {
		width: 68rpx;
		height: 68rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}
	.ordernavmain1 {
		margin-top: 30rpx;
		width: 50%;
		display: flex;
		justify-content: space-between;
	}
	.ordernavmain {
		/* width: 85%; */
		display: flex;
		justify-content: space-between;
	}
	.ordereach {
		position: relative;
		color: #0A0A0A;
		font-size: 28rpx;
		width: 130rpx;
		padding: 4rpx 0;
		text-align: center;
		border-radius: 40rpx;
	}
	.activenav {
		color: #fff;
		background-color: #ee434b;
	}
	.activenav1::after {
		font-size: 34rpx;
		position: absolute;
		left: 50%;
		top: 46rpx;
		content: "";
		display: block;
		width: 60rpx;
		margin-left: -30rpx;
		height: 4rpx;
		background-color: #f3430e;
		border-radius: 2rpx;
	}
</style>
